<template>
    <view class="item">
        <u-row class="u-flex u-flex-wrap">
            <u-col v-for="(item,index) in list" :key="index" :span="item.span" 
                :class="['u-font-26','u-m-t-20']" style="flex-direction:row">
                <text class="u-m-r-10 uni-gery-color">{{item.title}}</text>
                <text v-if="item.field=='ywzt' && item.value=='办结'" style="color:#999999">{{item.value}}</text>
                <text v-if="item.field=='ywzt' && item.value=='临时'" style="color:#f0ad4e">{{item.value}}</text>
                <text v-if="item.field=='ywzt' && item.value=='注销'" style="color:#dd524d">{{item.value}}</text>
                <text v-if="item.field=='ywzt' && item.value=='办理中'" style="color:#007aff">{{item.value}}</text>
                <text v-if="item.field=='ywzt' && item.value=='签收中'" style="color:#333333">{{item.value}}</text>
                <text v-if="item.field!='ywzt'" class="u-line-1" 
                    :style="{width:item.span==12?'78%':item.span==7?'69%':'50%'}">
                    {{item.value}}
                </text>
            </u-col>
        </u-row>
    </view>
</template>

<script>
export default {
    name: 'item',
    props:{
        listItem:{
            type: Array,
            default(){
                return {}
            }
        }
    },
    data(){
        return{
            list: []
        }
    },
    created() {
        this.init()
    },

    watch:{
        listItem(){
            this.init()
        }
    },

    methods:{
        init(){
            this.list = this.listItem

        }
    },
}
</script>
<style scoped lang="scss">
    .item{
        background: #fff;
        padding: 10rpx 12rpx 30rpx 24rpx;
        border-radius: 16rpx;
    }
</style>